使用ItemRenderer处理基于List容器的显示内容 [DataGrid, Tree, List等]

Categories: Flex; Tagged with: ActionScript • DataGrid • DataGridColumn; @ January 6th, 2009 0:52

具体的情况如:使用labelFunction处理DataGrid显示内容 , 只是这里使用的是ItemRender来实现并实现更多功能.

如Student中有一Gender_属性, 1表示男生, 2表示女生, 3表示未知, 现在有下要求:

1. 在DataGrid中不可以显示1, 2,3, 应显示男女 [ 该功能可由LabelFunction实现],

2. 如果为男生,, 则”男生”颜色为红色, 女生颜色为默认, 未知字体大小为10号

具体实现:

			var columnGender:DataGridColumn = new DataGridColumn();
			columnGender.headerText = "Gender";
			columnGender.dataField = "Gender_"; //使用ItemRender
			columnGender.itemRenderer =  new ClassFactory(Gender_Label);
			//columnGender.labelFunction = formatGender;

			_dataGridStudent.columns = [columnID, columnName, columnAge, columnGender];

ItemRender实现: 该类将继承List, 重写其UpdateDisplayList函数, 如下:

package com.test.itemRender
{
import mx.controls.Label;
import mx.controls.listClasses.ListBase;

public class Gender_Label extends Label
{
	/**
	 * 构造函数
	 */
	public function Gender_Label() {
		super();
	}

	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
		super.updateDisplayList(unscaledWidth, unscaledHeight);
		if(data.Gender_ == 1) {
             setStyle('fontSize',14);
             setStyle('fontWeight', 'bold');
             setStyle('color', 0xDD0000);
             this.text = "男生";
		 }else if(data.Gender_ == 2) {
		 	setStyle('fontSize',14);
		 	this.text = "女生"
		 }
		 //otherwise, return the label to its regular state
		 else {
		     setStyle('fontSize', 10);
             this.text = "未知";
		 }
	}

}// end of class
}// end of package

最终效果:

AIR中通过右键直接选定基于LIST容器[DataGrid, List, Tree等]的数据 – Select List item with mouse right-click <-> 使用ActionScript建立DataGrid, 添加右键, 增加列, 并设定列的ItemRenderer